<template>
  <el-scrollbar>
  <div>
    <div>
        <el-form ref="form" :inline="true" :model="searchObj" label-width="50px" label-position="left" size="small">
          <el-form-item label="名称">
            <el-input
                    v-model="searchObj.title"
                    clearable
                    prefix-icon="el-icon-search"
                    maxlength="10"
                    type="text"
            />
          </el-form-item>
          <el-form-item label="路径">
            <el-input
                    v-model="searchObj.path"
                    clearable
                    prefix-icon="el-icon-search"
                    maxlength="30"
                    type="text"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="searchObj.enabled">
              <el-radio :label="enabledState.enabled">启用</el-radio>
              <el-radio :label="enabledState.disabled">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button @click="getTable" icon="el-icon-search" type="primary">查询</el-button>
            <el-button @click="formReset" icon="el-icon-refresh-right" type="primary">重置</el-button>
          </el-form-item>
        </el-form>
    </div>
    <div>
      <el-button @click="handleAdd" type="primary" size="small"><i class="fa fa-plus" style="margin-right: 6px"/>添加</el-button>
    </div>
      <div>
        <el-table
                size="small"
                :data="tableData"
                row-key="id"
                border
                fit
                :indent="15"
                :default-expand-all="defaultExpandFlag"
                v-loading="loading">
          <el-table-column
                  prop="id"
                  label="id"
                  v-if="false">
          </el-table-column>
          <el-table-column
                  label="序号"
                  align="center"
                  type="index">
          </el-table-column>
          <el-table-column
                  prop="title"
                  show-overflow-tooltip
                  label="名称">
          </el-table-column>
          <el-table-column
                  prop="icon"
                  label="图标"
                  width="80"
                  align="center">
            <template #default="scope">
              <i :class="scope.row.icon"/>
            </template>
          </el-table-column>
          <el-table-column
                  prop="code"
                  align="center"
                  show-overflow-tooltip
                  label="编码">
          </el-table-column>
          <el-table-column
                  prop="path"
                  show-overflow-tooltip
                  label="路径">
          </el-table-column>
          <el-table-column
                  prop="component"
                  show-overflow-tooltip
                  label="组件">
          </el-table-column>
          <el-table-column
                  prop="menuType"
                  align="center"
                  label="类型">
            <template #default="scope">
              <div>
                <el-tag effect="dark" v-if="scope.row.menuType === menuType.catalogue" size="small" title="目录"><i class="fa fa-folder-open-o" style="margin-right: 5px" />目录</el-tag>
                <el-tag effect="dark" v-else-if="scope.row.menuType === menuType.menu" type="success" size="small"  title="菜单"><i class="fa fa-list-ul" style="margin-right: 5px" />菜单</el-tag>
                <el-tag effect="dark" v-else-if="scope.row.menuType === menuType.button" type="warning" size="small" title="按钮"><i class="fa fa-shield" style="margin-right: 5px" />按钮</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column
                  prop="enabled"
                  label="状态"
                  width="100"
                  align="center">
            <template #default="scope">
              <!--fa fa fa-cog fa-spin-->
              <i :style="{'color': scope.row.enabled == enabledState.enabled ? 'green' : 'red','fontSize': '17px'}"
                 :class="scope.row.enabled == enabledState.enabled ? 'fa fa-check' : 'fa fa-ban'"
                 :title="scope.row.enabled == enabledState.enabled ? '启用' : '禁用'"/>
            </template>
          </el-table-column>
          <el-table-column
                  prop="gmtCreate"
                  label="创建时间"
                  width="100"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="sort"
                  label="排序"
                  show-overflow-tooltip
                  width="80"
                  align="center">
          </el-table-column>

          <el-table-column
                  prop="name"
                  label="操作"
                  width="170"
                  align="center">
            <template #default="scope">
              <el-space spacer="|">
                <el-button
                        size="mini"
                        type="text"
                        @click="handleaddChildren(scope.$index, scope.row)">查看</el-button>
                <el-button
                        size="mini"
                        type="text"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="text"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </el-space>
            </template>
          </el-table-column>
        </el-table>
      </div>
  </div>

    <!--添加或修改dialog-->
  <add_or_edit ref="addOrEdit" v-if="addOrEditTransData.dialogVisible" :transData="addOrEditTransData" @refreshTable="getTable"></add_or_edit>
  </el-scrollbar>
</template>

<script>
  import add_or_edit from '@/views/system/permission/components/AddOrEdit';
  import constants from '@/config/constants/systemConstants';

  export default {
    name: "sysPermissionList",
    components: {
      add_or_edit
    },
    data() {
      return {
        loading: false,
        defaultExpandFlag: true,
        tableData: [],
        newData: [],
        searchObj: {},
        //传递给子组件的数据
        addOrEditTransData: {
          dialogVisible: false,
        },
        menuType: {
          //目录
          catalogue: constants.menuType.catalogue,
          //菜单
          menu: constants.menuType.menu,
          //按钮
          button: constants.menuType.button
        },
        enabledState: {
          enabled: constants.enabled,
          disabled: constants.disabled,
        },
      }
    },
    created() {
      this.getTable();
    },
    methods: {
      /*表格操作*/
      getTable(){
        this.loading = true;
        let url = 'tableTree';
        let obj = {};
        if(this.searchObj.title || this.searchObj.path || this.searchObj.enabled == this.enabledState.enabled || this.searchObj.enabled == this.enabledState.disabled) {
          url = 'filterTree';
          obj = {...this.searchObj};
        }
        this.$api.getRequest(`/permission/${url}`, obj).then(res => {
          if(res.success){
            this.tableData = res.data;
            this.loading = false;
          }
        })
      },
      /*搜索条件*/
      formReset() {
        this.searchObj = {};
        this.getTable();
      },
      /*crud操作*/
      handleAdd() {
        this.addOrEditTransData.operation = constants.operation.add;
        this.addOrEditTransData.title = '添加';
        this.addOrEditTransData.dialogVisible = true;
      },
      handleEdit(index, row){
        this.addOrEditTransData.operation = constants.operation.edit;
        this.addOrEditTransData.title = '编辑';
        Object.assign(this.addOrEditTransData.data = {}, row);
        this.addOrEditTransData.dialogVisible = true;
      },

      handleaddChildren(index, row) {
        this.addOrEditTransData.operation = constants.operation.see;
        this.addOrEditTransData.title = '查看';
        Object.assign(this.addOrEditTransData.data = {}, row);
        this.addOrEditTransData.dialogVisible = true;
      },
      //delete
      handleDelete(index, row) {
        let rowId = row.id;
        if(row.children instanceof Array && row.children.length){
          this.$message.warning('该节点下已有数据，请先删除子节点！');
        } else {
          this.$confirm(`是否永久删除ID为[${rowId}],名称为[${row.title}]的数据?`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if(rowId) {
              this.$api.deleteRequest(`/permission/${rowId}`).then(res=> {
                this.getTable();
              })
            }
          }).catch(() => {});
        }
      },
      /*格式化操作*/
      formatMenuType(row, column, cellValue, index) {
      }
    }
  }
</script>

<style scoped>
  /deep/ .el-form-item{
    margin-left: 20px;
  }

  /*滚动条隐藏*/
  ::-webkit-scrollbar{
    display:none;
  }

</style>
